import React, { useState, useEffect } from "react";

export default function CustomHooks() {

  function useNumber(){
    let [number,setNumber] = useState(0);
    useEffect(()=>{
      setInterval(()=>{
          setNumber(number=>number+1);
      },1000);
    },[]);
    return [number,setNumber];
  }

  function Counter1() {
    let [number,setNumber] = useNumber();
    return (
        <div><button onClick={()=>{
            setNumber(number+1)
        }}>{number}</button></div>
    )
  }

  function Counter2() {
    let [number,setNumber] = useNumber();
    return (
      <div>
        <button onClick={()=>{setNumber(number+1)}}>{number}</button>
      </div>
    )
  }

  return (
    <div>
      <Counter1 />
      <Counter2 />
    </div>
  )
}